<template>
<div class="long-rent" style="margin-top: 60px">
  <div class="car-list clearfix" style="width: 1024px;margin: 0 auto">
    <el-row :gutter="24">
      <el-col :span="6" style="margin: 10px 0;" v-for="car in carArr">
    <div class="com-car-card">
      <a @click="detail(car.id)"><img :src="'http://localhost:19283/'+car.imgUrl" style="border-radius: 5px;width:244px; height:172px"></a>
      <div class="content">
        <a  style="color: black;">
          <h3 class="title" style="font-size: 16px;text-align: left;margin-bottom: 10px">{{ car.info }}</h3></a>
        <p class="desc" style="text-align: left;margin-top: 0">{{ car.number }} <span style="color: red"> 5.0 分</span></p>
        <p class="price" style="color: red;text-align: left"><span style="font-weight: bold">{{ car.priceMonth }}</span>元/月均</p>
      </div>
    </div>
      </el-col>
      </el-row>
  </div>
  <!--分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="8"
      layout="prev, pager, next, jumper"
      :total= total>
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "ChangZuView",
  data() {
    return {
      carArr: [],
      currentPage: 1, // 当前页码，与后端同步
      pageSize: 8, // 每页显示的数量，可以根据实际情况修改
      total: 0, // 总数量，从后端获取
      page : 1,
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.page = currentPage;
      this.axios.get("http://localhost:19482/car/list/"+currentPage)
          .then((response)=>{
            if (response.data.state==20000){
              // pageData
              this.carArr = response.data.data.list;
            }
          })
    },
    detail(id) {
      this.axios.get('http://localhost:19482/car/' + id).then((response) => {
        if (response.data.state == 20000) {
          this.car = response.data.data
          this.$router.push("/detail?id=" + id);
        } else {
          this.$confirm(response.data.message, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
      })
    }
  },
  mounted() {
    this.axios.get("http://localhost:19482/car/list/"+this.currentPage)
        .then((response) => {
          if (response.data.state == 20000) {
            this.carArr = response.data.data.list;
            this.total=response.data.data.total;
            console.log(this.carArr)
          }
        });
  }
}
</script>

<style scoped>

/*{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/23/04/199281238/1681297519299_3.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"荣威 RX5新能源 1.5T 自动挡",number:"沪A***65",score:"5.0",price:"8100"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"},
{imgUrl:"https://carphoto.atzuche.com/car/22/10/321745572/1665546893564_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480",
  info:"丰田 雷凌1.2T 自动挡",number:"沪D***12",score:"5.0",price:"3670"}*/
</style>